
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="/favicon.ico">

        <title>运维服务平台</title>

        <!-- Bootstrap core CSS -->
        <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link href="/static/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">

        <!-- Custom styles for this template -->
        <link href="/static/bootstrap/css/dashboard.css" rel="stylesheet">

        <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
        <!--[if lt IE 9]><script src="/static/bootstrap/js/ie8-responsive-file-warning.js"></script><![endif]-->
        <script src="/static/bootstrap/js/ie-emulation-modes-warning.js"></script>

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="/static/bootstrap/js/html5shiv.min.js"></script>
          <script src="/static/bootstrap/js/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>
        <!-- Bootstrap core JavaScript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="/static/jquery/js/jquery-2.1.4.min.js"></script>
        <script src="/static/bootstrap/js/bootstrap.min.js"></script>
        <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
        <script src="/static/bootstrap/js/holder.js"></script>
        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
        <script src="/static/bootstrap/js/ie10-viewport-bug-workaround.js"></script>

        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/index/">运维服务平台&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <a class="navbar-brand" href="/index/">你好！{{user_info.username}}</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="/index/">指示板</a></li>
                        <li><a href="/ChangePwd/">修改密码</a></li>
                        <li><a href="/logout/">注销</a></li>
                        <li><a href="/about/">关于</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-3 col-md-2 sidebar">
                    <ul class="nav nav-sidebar">
                        <li><a href="/index/">指示板</a></li>
                        <li><a href="/Alerts/">告警平台</a></li>
                </div>
                <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" id="page">

                    {% block page%} <!-- 将id="page"下面的代码截取，并替换为想要的内容 -->

                    <h1 class="page-header">指示板</h1>
                    <div class="row placeholders container-fluid">
            {#          {% for IMG in IMG_name %}#}
            {#            <div class="col-xs-6 col-md-3 placeholders">#}
            {#              <img src="/static/availability/{{IMG}}" class="img-responsive placeholders" alt="Generic placeholder thumbnail" data-action="zoom">#}
            {#              <h4>{{IMG|cut:'.png'}}</h4>#}
            {#            </div>#}
            {#          {% endfor %}#}
                        <link rel="stylesheet" type="text/css" href="/static/jquery/css/zoom.css">
                        <script src="/static/jquery/js/zoom.js"></script>
                    </div>
                <h2 class="sub-header">用户行为统计</h2>
                <div class="table-responsive container-fluid">
                    <link rel="stylesheet" type="text/css" href="/static/bootstrap/css/dataTables.bootstrap.css">
                    <script type="text/javascript" language="javascript" src="/static/jquery/js/jquery-1.10.2.min.js"></script>
                    <script type="text/javascript" language="javascript" src="/static/jquery/js/jquery.dataTables.min.js"></script>
                    <script type="text/javascript" language="javascript" src="/static/bootstrap/js/dataTables.bootstrap.js"></script>
                    <script type="text/javascript" charset="utf-8">
                        $(document).ready(function() {
                            $('#STAT_INFO').dataTable({
                                "aaSorting": [[1, "desc"]],
                                "bProcessing": true,
                                "bAutoWidth": true,
                                "oLanguage": {
                                    "sLengthMenu": "每页显示 _MENU_ 条记录",
                                    "sZeroRecords": "对不起，查询不到任何相关数据",
                                    "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录。",
                                    "sInfoEmpty": "找不到相关数据",
                                    "sInfoFiltered": "（数据表中共为 _MAX_ 条记录）",
                                    "sProcessing": "正在加载中...",
                                    "sSearch": "即时搜索：",
                                    "oPaginate": {
                                        "sPrevious": " 上一页 ",
                                        "sNext": " 下一页 "
                                    }
                                },
                            });
                        } );
                    </script>
                    <table class="table table-striped table-bordered" cellspacing="0" width="100%" id="STAT_INFO">
                        <thead>
                            <tr>
                                <th>接口</th>
                                <th>开始统计时间</th>
                                <th>结束统计时间</th>
                                <th>PV/UV</th>
                                <th>总数</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for stat in stat_info %}
                                <tr>
                                    {% if stat.interface__interface == 'None' %}
                                        <td>总访问量</td>
                                    {% else %}
                                        <td>{{stat.interface__interface}}</td>
                                    {% endif %}
                                    <td>{{stat.f_time}}</td>
                                    <td>{{stat.t_time}}</td>
                                    <td>{{stat.interface__type}}</td>
                                    <td>{{stat.total}}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

                    {% endblock %}<!-- block截取内容结束的地方 -->

        <div align="center"><br>运维服务平台<br></div>
    </body>
</html>
